<template>
  <BottomDrawer :visible="addVisible" :title="dataType.dataType === 0 ? '添加班次' : ' 编辑班次'" :width="465"
    @close="addVisible = false">
    <div style="overflow-x: hidden;padding-left: 10px;">
        <PageForm ref="pageForm" :list="list" width="100px" :labelPosition="'left'" :form-data="formData" :rules="rules">
        </PageForm>
        <errorList ref="errorListRef"></errorList>
    </div>

    <template #footer>
      <el-button @click="handleSubmit" type="primary">确 定</el-button>
      <el-button @click="addVisible = false">取 消</el-button>
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { RoleForm, RoleQuery } from '@/types/role';
import type { FormRules, ElTree } from 'element-plus';
import type { ShiftFrom, ShiftRole } from '@/types/registrationSettings/index.ts';
import { addShift, updateShift } from '@/api/register/index';
import errorList from '../../scheduling/commons/errorList.vue';
const errorListRef = ref<InstanceType<typeof errorList>>();
const rules = reactive<FormRules<ShiftRole>>({
  shiftName: [
    { required: true, message: '请输入班次名称', trigger: 'blur' },
  ],
  startTime: [
    { required: true, message: '请输入开始时间', trigger: 'blur' },
  ],
  endTime: [
    { required: true, message: '请输入结束范围', trigger: 'blur' },
  ]
});
const defaultProps = {
  children: 'children',
  label: 'name',
};
// 获取序列列表
const pageForm = ref();
const dataType = defineProps<{ dataType: Number }>();
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

defineExpose<{
  open: () => void;
  open1: (menu: ShiftRole) => void;
}>({
  open: () => {
    formData.value = {
       shiftName: '',
  startTime: '',
  endTime: ''
    }
    addVisible.value = true;
  },
  open1: (menu: ShiftRole) => {
    formData.value = menu
    addVisible.value = true;

  },
});

const addVisible = ref(false);

const formData = ref<ShiftRole>({
  shiftName: '',
  startTime: '',
  endTime: ''
});

const list: any = computed(() => [
  {
    list: [
      {
        span: 24,
        label: '班次名称',
        prop: 'shiftName',
        componentProps: {
          placeholder: '班次名称',
          width: '300px'
        },
        component: 'input',
      },
      {
        span: 24,
        component: 'time',
        prop: 'startTime',
        componentProps: {
          width: '300px'
        },
        label: '开始时间',
      },
      {
        span: 24,
        component: 'time',
        prop: 'endTime',
        componentProps: {
          width: '300px'
        },
        label: '结束时间',
      },
    ],
  },
]);

const addChannelApi = async () => {
  let res = await addShift(formData.value)
    if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '保存成功'
    });
    closeDrawer()
  } else {
    
  }
};
const editChannelApi = async () => {
  let res = await updateShift(formData.value)
  if (res.code == '200') {
     if(res.data.isCancel && res.data.isCancel == '1'){
        errorListRef.value?.open(res)
        return
      }else{

        ElMessage({
          type: 'success',
          message: '保存成功'
        });
        closeDrawer()
      }
  
  
  } else {
    
  }

};
const handleSubmit = async () => {
  const ruleFormRef = pageForm.value?.ruleFormRef;
  await ruleFormRef.validate((valid: any, fields: any) => {
    if (valid) {
      if (dataType.dataType === 0) {
        addChannelApi();
      } else {
        editChannelApi();
      }
    } else {
      //console.log('error submit!', fields);
    }
  });
};
const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  addVisible.value = false
  emit('closeDrawer');
};
onMounted(() => {
});
</script>
<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
</style>
